import React, { useState, useEffect } from 'react';
import classnames from 'classnames';
import prefix from '../lib/clsname';
import getInvoiceType from '../lib/getInvoiceType';
const clsName = `${prefix.name}-nav`;
function genArrayByRange(start, end) {
    let result = [];
    let startIndex = start - 1;
    let endIndex = end - 1;
    for (let i = 0; i <= endIndex; i++) {
        if (i >= startIndex) {
            result.push(i);
        }
    }
    return result;
}
function Nav(props) {
    const { invoices = [], activeKey, navLength = 5, setActiveKey } = props;
    const [visibleViewIndexs, setVisibleViewIndexs] = useState([]);
    const handleClick = (code) => {
        setActiveKey(code);
    };
    const currentIndex = invoices.findIndex(item => { return item.invoiceDataCode === activeKey });
    const goPrev = () => {
        if (currentIndex > -1) {
            if (currentIndex === 0) {
                setActiveKey(invoices[invoices.length - 1].invoiceDataCode);
            } else {
                setActiveKey(invoices[currentIndex - 1].invoiceDataCode);
            }
        }
    };
    const goNext = () => {
        if (currentIndex > -1) {
            if (currentIndex === invoices.length - 1) {
                setActiveKey(invoices[0].invoiceDataCode);
            } else {
                setActiveKey(invoices[currentIndex + 1].invoiceDataCode);
            }
        }
    }
    const showNav = invoices?.length > 1;
    useEffect(() => {
        setVisibleViewIndexs(current => {
            let visibleLength = invoices.length <= navLength ? invoices.length : navLength;
            let totalCount = invoices.length;
            let next = [];
            let activeIndex = invoices.findIndex(item => { return item.invoiceDataCode === activeKey });
            let readAbleOrder = activeIndex + 1;
            if (!current.includes(activeIndex)) {
                if (readAbleOrder <= visibleLength) {
                    next = genArrayByRange(1, totalCount > visibleLength ? visibleLength : totalCount);
                } else {
                    next = genArrayByRange(readAbleOrder - visibleLength + 1, readAbleOrder);
                }
            } else {
                next = current;
            }
            return next;
        })
    }, [activeKey, navLength, invoices.length]);
    return (
        <div className={clsName}>
            {showNav ? <div className={`${clsName}-page-no`}>{currentIndex + 1} / {invoices.length}</div> : null}
            <div className={`${clsName}-thumb-panel`}>
                {showNav ? <div className="to-prev" onClick={goPrev}>
                    <span className="fm fm-angle-left"></span>
                </div> : null}
                <div className="thumb-list">
                    {invoices.map((invoice, index) => {
                        if (!visibleViewIndexs.includes(index)) return null;
                        let invoiceFile = invoice?.attachmentFiles?.[0] || {};
                        let invoiceType = getInvoiceType(invoiceFile);
                        let thumbCls = classnames('thumb-child', {
                            'thumb-child_pdf': invoiceType === 'pdf',
                            'thumb-child_image': invoiceType === 'img',
                            'thumb-child_ofd': invoiceType === 'ofd',
                            'thumb-child_empty': ['xml', 'empty'].includes(invoiceType),
                            'active': invoice.invoiceDataCode === activeKey,
                        });
                        return (
                            <div className={thumbCls} key={invoice.invoiceDataCode} onClick={() => { handleClick(invoice.invoiceDataCode) }}>
                                {invoiceType === 'pdf' && <i className="fm fm-pdf"></i>}
                                {invoiceType === 'img' && <img src={invoiceFile.thumUrl} />}
                                {invoiceType === 'ofd' && <i className="fm fm-ofd"></i>}
                                {['xml', 'empty'].includes(invoiceType) ? <i className="fm fm-receipt1"></i> : null}
                            </div>
                        )
                    })}
                </div>
                {showNav ? <div className="to-next" onClick={goNext}>
                    <span className="fm fm-angle-right"></span>
                </div> : null}
            </div>
        </div>
    )
}
export default Nav;